/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
  /*
  !!! 新增和改动这些变量需和 UI 同学确认 !!!
  https://mastergo.netease.com/goto/thk2pBoE?page_id=181:8072&file=92599527419152
*/
  --primary-color: var(--primary-color-6);
  --primary-color-1: #edf3ff;
  --primary-color-1_5: #dde9ff;
  --primary-color-2: #cddeff;
  --primary-color-3: #adc8ff;
  --primary-color-4: #8db3ff;
  --primary-color-5: #6c9dff;
  --primary-color-6: #4c88ff;
  --primary-color-7: #3e6fd1;
  --primary-color-8: #3157a3;
  --primary-color-9: #233e75;
  --primary-color-10: #152647;
  --success-color: var(--success-color-6);
  --success-color-1: #eaf9f1;
  --success-color-2: #c3edd8;
  --success-color-3: #9be1be;
  --success-color-4: #74d5a4;
  --success-color-5: #4dc98b;
  --success-color-6: #26bd71;
  --success-color-7: #1f9b5d;
  --success-color-8: #187948;
  --success-color-9: #115734;
  --success-color-10: #0b351f;
  --warning-color: var(--warning-color-6);
  --warning-color-1: #fff7e8;
  --warning-color-2: #ffeabf;
  --warning-color-3: #ffdc96;
  --warning-color-4: #ffce6d;
  --warning-color-5: #ffc043;
  --warning-color-6: #ffb21a;
  --warning-color-7: #d19215;
  --warning-color-8: #a37211;
  --warning-color-9: #75520c;
  --warning-color-10: #473207;
  --highlight-color: var(--highlight-color-6);
  --highlight-color-1: #fff3e9;
  --highlight-color-2: #ffdcc2;
  --highlight-color-3: #ffc59b;
  --highlight-color-4: #ffae73;
  --highlight-color-5: #ff974c;
  --highlight-color-6: #ff8024;
  --highlight-color-7: #d1691e;
  --highlight-color-8: #a35217;
  --highlight-color-9: #753b11;
  --highlight-color-10: #47240a;
  --error-color: var(--error-color-6);
  --error-color-1: #feedef;
  --error-color-2: #fbccd0;
  --error-color-3: #f9abb2;
  --error-color-4: #f78b94;
  --error-color-5: #f46a75;
  --error-color-6: #f24957;
  --error-color-7: #c63c47;
  --error-color-8: #9b2f38;
  --error-color-9: #6f2228;
  --error-color-10: #431418;
  --grey-color: var(--grey-color-6);
  --grey-color-1: #f7f8fa;
  --grey-color-2: #f2f3f5;
  --grey-color-3: #e5e6eb;
  --grey-color-4: #c9cdd4;
  --grey-color-5: #a9aeb8;
  --grey-color-6: #86909c;
  --grey-color-7: #6b7785;
  --grey-color-8: #4e5969;
  --grey-color-9: #272e3b;
  --grey-color-10: #1d2129;
  --base-color-white: #fff;
  --base-color-white-op-60: #ffffff99;
  --base-color-black: #000;
  --base-color-black-op-8: rgba(0, 0, 0, 0.08);
  --base-color-black-op-15: rgba(0, 0, 0, 0.15);
  --base-color-black-op-25: rgba(0, 0, 0, 0.25);
  --base-color-black-op-50: rgba(0, 0, 0, 0.5);
  --shadow-color-layout: 0px 0px 12px rgba(0, 0, 0, 0.06);
  --shadow-color-dialog: 0px 0px 16px rgba(0, 0, 0, 0.08);
  --shadow-color-popover: 0px 0px 16px rgba(0, 0, 0, 0.16);
  --shadow-color-toolbar: 0px 2px 8px rgba(0, 0, 0, 0.12);
  --text-color-primary: #111;
  --text-color-primary-2: #222;
  --text-color-primary-3: #333;
  --text-color-regular: #555;
  --text-color-regular-2: #666;
  --text-color-secondary: #777;
  --text-color-secondary-2: #888;
  --text-color-disabled: #999;
  --line-color-primary: #dadee8;
  --line-color-regular: #e7eaee;
  --fill-color-primary: var(--base-color-white);
  --fill-color-regular: var(--grey-color-1);
  --fill-color-designer: var(--grey-color-1);
  --fill-color-popover: var(--base-color-white);
  --fill-color-dialog: var(--base-color-white);
  --fill-color-hover: #f4f4f4;
  --fill-color-form: var(--grey-color-2);
  --fill-color-thead: var(--grey-color-2);
  --fill-color-stripe: #f8f8f8;
  --icon-color-primary: var(--base-color-white);
  --icon-color-regular: #666;
  --icon-color-secondary: #999;
  --icon-color-disabled: #aaa;
  --icon-background-primary: var(--primary-color);
  --icon-background-regular: transparent;
  --icon-color-regular-active: var(--primary-color);
  --icon-background-regular-active: transparent;
  --icon-color-primary-disabled: var(--icon-color-primary);
  --icon-color-regular-disabled: #ccc;
  --icon-background-primary-disabled: var(--primary-color-3);
  --icon-background-regular-disabled: transparent;
  --icon-color-primary-hover: var(--icon-color-primary);
  --icon-color-regular-hover: var(--text-color-primary);
  --icon-background-primary-hover: var(--primary-color-5);
  --icon-background-regular-hover: var(--base-color-black-op-8);
  --icon-color-regular-active-hover: var(--icon-color-regular-active);
  --icon-background-regular-active-hover: var(--icon-background-regular-hover);
  --brand-primary: var(--primary-color);
  --border-width-base: 1px;
  --designer-scalePanel-line-color: #e0e0e033;
  --designer-dropArea-border-color: var(--line-color-regular);
  --designer-first-color: var(--base-color-white);
  --designer-second-color: #f9f9f9;
  --designer-third-color: #ededed;
  --designer-fourth-color: #e0e0e0;
  --color-base: var(--text-color-primary);
  --color-light: var(--icon-color-regular);
  --color-lighter: var(--icon-color-regular);
  --brand-disabled: var(--icon-color-regular-disabled);
  --designer-color-base: var(--text-color-regular);
  --designer-border-color: var(--line-color-regular);
  --designer-font-disabled-color: var(--text-color-disabled);
  --designer-icon-disabled-color: var(--icon-color-regular-disabled);
  --designer-background: var(--grey-color-1);
  --designer-head-background: var(--fill-color-primary);
  --designer-head-icon-color: var(--text-color-regular);
  --designer-head-tab-toggle-icon-color: #666;
  --designer-head-tab-toggle-icon-color-hover: #333;
  --designer-head-icon-color-hover: var(--text-color-primary-3);
  --designer-head-tab-toggle-icon-background-hover: #0000000d;
  --designer-head-integration-btn-color-hover: var(--base-color-white);
  --designer-head-select-branch-placeholder-color: var(--text-color-secondary);
  --designer-head-concept-icon-background-hover: #e0e0e0cc;
  --designer-head-help-icon-color: #a6a8ac;
  --designer-save-icon-success-color: var(--success-color);
  --designer-save-icon-error-color: var(--danger-color);
  --designer-search-label-background-color: var(--fill-color-regular);
  --designer-head-action-integration-icon-color: #5991ff;
  --designer-head-action-debug-icon-color: #23a97d;
  --designer-head-action-snapshot-icon-color: #ff991c;
  --designer-head-action-subtract-icon-color: #989db9;
  --designer-list-desc-color: var(--text-color-disabled);
  --designer-foot-background: var(--fill-color-primary);
  --designer-foot-border-color: var(--line-color-regular);
  --cooperation-compare-conflict-count-color: var(--text-color-regular-2);
  --cooperation-compare-conflict-count-background-color: #e0e0e0;
  --scrollbar-background: var(--base-color-black-op-15);
  --scrollbar-background-hover: var(--base-color-black-op-25);
  --designer-tab-title-color: var(--text-color-secondary);
  --designer-tab-background-color: var(--grey-color-1);
  --designer-tab-title-active-color: var(--text-color-primary);
  --designer-tab-item-background-selected: var(--base-color-white);
  --designer-tab-background: var(--designer-second-color);
  --tree-view-node-background-selected: #cddeff;
  --tree-view-node-expander-color-hover: var(--text-color-primary-3);
  --tree-view-node-description-color: var(--text-color-disabled);
  --designer-tree-fragment-tab-item-label-color: var(--text-color-regular);
  --designer-tree-fragment-tab-item-background-hover: var(--fill-color-hover);
  --designer-tree-fragment-tab-item-color-hover: var(--fill-color-hover);
  --designer-tree-fragment-tab-item-background-selected: var(--primary-color);
  --designer-tree-fragment-tab-item-color-selected: var(--fill-color-primary);
  --designer-add-btn-background: #919499;
  --designer-add-btn-background-hover: #74767a;
  --designer-tree-menu-search-icon-color: var(--text-color-regular-2);
  --designer-tree-view-node-item-color: var(--text-color-primary);
  --designer-tree-view-node-item-desc-color: var(--text-color-secondary);
  --designer-tree-view-node-item-desc-selected-color: var(--text-color-regular);
  --designer-empty-color: var(--text-color-regular);
  --designer-empty-help-color: var(--primary-color);
  --designer-panel-background: var(--fill-color-primary);
  --designer-panel-empty-color: var(--text-color-secondary);
  --designer-right-panel-tab-color: var(--designer-thirty-fifth-color);
  --designer-right-panel-tab-color-hover: var(--designer-thirty-fourth-color);
  --designer-right-panel-tab-color-selected: var(--designer-thirty-fourth-color);
  --designer-right-panel-tab-color-selected-border-color: var(--designer-thirty-color);
  --designer-right-panel-tab-global-variable-local-cache-background-color: #f0f0f0;
  --designer-right-panel-tab-global-variable-local-cache-font-color: #999;
  --designer-right-panel-tab-global-variable-local-cache-border-color: #e0e0e0;
  --designer-navbar-width: 50px;
  --designer-navbar-background: var(--fill-color-primary);
  --designer-navbar-tab-icon-color: #9da6b5;
  --designer-navbar-tab-text-color: var(--text-color-secondary);
  --designer-navbar-tab-text-color-select: var(--text-color-primary);
  --designer-navbar-tab-icon-color-select: var(--brand-primary);
  --designer-navbar-tab-background-hover: var(--fill-color-hover);
  --designer-navbar-tab-background-select: var(--primary-color-1);
  --designer-view-loading-background-color: var(--fill-color-regular);
  --designer-view-loading-color: var(--text-color-regular);
  --loading-mask-bg: #00000033;
  --designer-scalePanel-page-content-dot-color: radial-gradient(
    #dbdadb 1px,
    var(--grey-color-2) 1px
  );
  --designer-scale-operate-background: var(--fill-color-primary);
  --designer-scale-operate-background-hover: var(--fill-color-hover);
  --designer-scale-operate-color: var(--icon-color-regular);
  --designer-scale-operate-color-hover: var(--text-color-primary);
  --designer-scale-border-color: var(--line-color-regular);
  --designer-scale-input-border-color: transparent;
  --designer-scale-category-border-color: var(--designer-scale-border-color);
  --designer-scale-operate-icon-color: #050505;
  --designer-scale-operate-icon-full-color: var(--text-color-regular);
  --designer-scale-operate-arrow-icon-color: var(--text-color-secondary);
  --designer-scale-operate-arrow-icon-color-hover: var(--designer-scale-operate-color-hover);
  --designer-scale-operate-icon-font-size: 24px;
  --designer-scale-operate-icon-background-selected: var(--primary-color);
  --designer-scale-operate-icon-color-selected: #fff;
  --designer-scale-operate-icon-background-hover: var(--fill-color-hover);
  --designer-scale-operate-scalebtn-size: 16px;
  --designer-scale-operate-scalebtn-background: #f5f5f5;
  --designer-scale-operate-scalebtn-background-hover: #e5e5e5;
  --designer-scale-operate-scalebtn-color: var(--icon-color-secondary);
  --designer-scale-operate-scalebtn-color-hover: var(--text-color-primary-3);
  --designer-scale-operate-scalebtn-border-color: var(--designer-scale-operate-scalebtn-background);
  --designer-scale-operate-box-shadow: 0px 2px 6px rgba(41, 44, 51, 0.08);
  --designer-scale-operate-border-radius: 4px;
  --table-designer-background: var(--fill-color-primary);
  --form-designer-background: var(--fill-color-primary);
  --role-panel-border-color: var(--line-color-regular);
  --role-panel-input-background-disabled: var(--input-background-disabled);
  --role-panel-select-input-color: var(--text-color-primary);
  --role-panel-select-input-background: transparent;
  --role-panel-select-input-border-color: var(--role-panel-border-color);
  --role-panel-select-room-background: #fff;
  --role-panel-select-room-border-color: var(--role-panel-border-color);
  --role-panel-select-cell-color: var(--text-color-regular);
  --role-panel-select-cell-background-hover: var(--primary-color);
  --role-panel-edit-modal-info-color-active: var(--text-color-primary-3);
  --role-panel-edit-modal-button-color: var(--brand-primary);
  --style-panel-select-desc-color: var(--text-color-secondary);
  --style-panel-boxingBorder-background: #ccc;
  --style-panel-boxingBorder-middle-color: #ccc;
  --style-panel-boxingContentItemInput-color: #222;
  --style-panel-boxingContentItemInput-prefix-color: #666;
  --style-panel-boxingContentItemInput-background-active: var(--primary-color);
  --style-panel-boxingContentItemInput-border-color-active: var(--primary-color);
  --style-panel-buttonIcon-color: #666;
  --style-panel-buttonIcon-color-hover: #222;
  --style-panel-buttonIcon-border-color: var(--line-color-regular);
  --style-panel-buttonIcon-border-color-hover: var(--primary-color);
  --style-panel-boxingbg-border-color: var(--line-color-regular);
  --style-panel-positionbg-border-color: #ccc;
  --style-panel-positionbg-background-hover: #e2ecff;
  --style-panel-size-input-background-color: #ededed;
  --style-panel-size-input-background-color-hover: #e1e1e1;
  --style-panel-size-input-background-color-active: #e1e1e1;
  --style-panel-size-input-icon-color: var(--primary-color);
  --style-panel-size-input-color: #666;
  --style-panel-size-input-color-hover: #222;
  --style-panel-size-input-border-color: var(--line-color-regular);
  --style-panel-colorpicker-border-color-active: var(--primary-color);
  --style-panel-setBackground-border-color: var(--line-color-regular);
  --style-panel-setBackground-background: #f9f9f9;
  --style-panel-setBackground-title-color: #333;
  --style-panel-setBackground-tab-color: #999;
  --style-panel-setBackground-tab-color-selected: #333;
  --style-panel-setBackground-tab-color-hover: var(--style-panel-setBackground-tab-color-selected);
  --style-panel-setBackground-tab-icon-color: #666;
  --group-attr-panel-icon-color: var(--text-color-secondary);
  --group-attr-panel-icon-color-hover: var(--icon-color-regular-hover);
  --group-attr-panel-title-color: #222;
  --group-attr-panel-title-background-hover: #f4f4f4;
  --designer-uploader-background: var(--fill-color-regular);
  --designer-uploader-color: #999;
  --designer-uploader-color-hover: var(--primary-color);
  --designer-uploader-border-color: #e0e0e0;
  --uploader-draggable-background: var(--fill-color-regular);
  --uploader-draggable-border-color: var(--line-color-regular);
  --uploader-draggable-color: #999;
  --uploader-draggable-color-hover: var(--primary-color);
  --uploader-draggable-tips-color: #666;
  --uploader-draggable-border-color-hover: var(--primary-color);
  --uploader-tablet-background-color: var(--grey-color-4);
  --uploader-tablet-border-color: #e0e0e0;
  --uploader-tablet-border-color-hover: var(--primary-color);
  --uploader-tablet-link-color: var(--text-color-regular);
  --uploader-tablet-link-color-hover: var(--text-color-regular);
  --uploader-tablet-link-color-selected: var(--primary-color);
  --uploader-tablet-link-box-background-color-selected: #f7fcfe;
  --uploader-tablet-link-box-color-selected: var(--text-color-primary);
  --uploader-image-previewicon-background-color: var(--base-color-black-op-50);
  --uploader-image-preview-background-color: var(--grey-color-3);
  --add-view-modal-border-color: var(--line-color-regular);
  --add-view-modal-group-list-background-hover: var(--fill-color-hover);
  --add-view-modal-group-list-background-selected: var(--primary-color);
  --add-view-modal-group-list-color: var(--text-color-primary);
  --add-view-modal-group-list-color-selected: var(--base-color-white);
  --add-view-modal-carousel-background: var(--grey-color-1);
  --designer-search-icon-color: #666;
  --designer-search-icon-color-hover: var(--primary-color);
  --designer-icon-color: #999;
  --designer-icon-select-bgcolor: #f9f9f9;
  --designer-icon-select-bgcolor-cus: #f9f9f9;
  --designer-icon-select-desc-color-cus: #999;
  --designer-icon-btn-text-color: #999;
  --designer-icon-select-tab-border: #ededed;
  --designer-icon-select-active-color: #ededed;
  --designer-icon-select-border-width: 1px;
  --designer-icon-font-color: #666;
  --designer-icon-cancel-color: #999;
  --designer-icon-cancel-color-hover: #333;
  --import-parttemplate-frontend-select-modal-title-color: #333;
  --import-parttemplate-frontend-select-modal-desc-color: #666;
  --import-parttemplate-info-background: var(--fill-color-regular);
  --import-parttemplate-frontend-select-modal-error-color: var(--error-color);
  --import-parttemplate-frontend-select-modal-warning-color: #111;
  --import-parttemplate-frontend-select-modal-warning-bg: var(--warning-color-1);
  --depends-dialog-font-first-color: #222;
  --depends-dialog-font-second-color: #aaa;
  --depends-dialog-manage-font-color: var(--text-color-regular);
  --depends-dialog-manage-empty-font-color: #aaa;
  --depends-dialog-manage-checked-item-border-color: var(--primary-color);
  --depends-dialog-manage-checked-item-background: var(--primary-color-1);
  --depends-dialog-manage-checked-item-font-color: var(--text-color-primary);
  --depends-dialog-manage-divider-background: var(--line-color-primary);
  --depends-dialog-manage-description-font-color: var(--text-color-secondary);
  --depends-dialog-manage-description-background: var(--grey-color-1);
  --depends-dialog-manage-search-icon-color: #666;
  --depends-tree-view-background: var(--fill-color-regular);
  --depends-tree-view-border-color: var(--line-color-regular);
  --seg-tree-view-border-color: var(--line-color-regular);
  --depends-tree-view-tip-font-color: #999;
  --depends-export-tooltip-icon-color: #333;
  --seg-tree-view-background: var(--fill-color-regular);
  --depends-dialog-version-color-disabled: #aaa;
  --clipboard-menu-items-shortcut-background-color: var(--base-color-black-op-8);
  --clipboard-menu-items-shortcut-font-color: var(--text-color-secondary);
  --designer-tree-drop-ghost-border-color: var(--primary-color);
  --designer-tree-drop-ghost-disabled-border-color: var(--error-color);
  --designer-tree-drop-ghost-mask-background: #4d88ff1a;
  --designer-tree-drop-disabled-color: #aaa;
  --component-event-submenu-group-title-background: #f9f9f9;
  --component-event-submenu-group-title-color: #999;
  --component-event-group-title-color: #999;
  --component-event-noevent-color: #aaa;
  --component-event-addTitle-color: var(--text-color-primary-2);
  --login-config-label-color: var(--text-color-secondary);
  --login-config-showlist-color: var(--text-color-regular);
  --login-config-icon-color: var(--text-color-regular);
  --login-config-icon-color-hover: var(--text-color-primary);
  --login-config-icon-background-hover: var(--fill-color-hover);
  --login-config-checkbody-color: var(--text-color-secondary);
  --login-config-checkbody-background: #fff;
  --preference-modal-title-background: var(--fill-color-regular);
  --designer-font-first-color: var(--text-color-primary-2);
  --designer-font-second-color: var(--icon-color-regular);
  --designer-font-third-color: var(--icon-color-regular);
  --designer-font-fourth-color: var(--text-color-primary-3);
  --designer-font-fifth-color: var(--text-color-primary-2);
  --designer-font-disabled-second-color: var(--text-color-disabled);
  --theme-dropdown-color: var(--text-color-primary-2);
  --theme-dropdown-color-selected: var(--primary-color);
  --theme-dropdown-arrow-color: var(--text-color-disabled);
  --theme-dropdown-arrow-color-hover: var(--fill-color-hover);
  --theme-dropdown-popper-background-color: var(--fill-color-popover);
  --cascade-menus-color: var(--text-color-primary);
  --cascade-menus-background: var(--fill-color-popover);
  --cascade-menus-border-color: var(--line-color-regular);
  --cascade-menus-item-icon-color: var(--icon-color-secondary);
  --cascade-menus-item-background-hover: var(--primary-color-2);
  --cascade-menus-item-color-disabled: var(--text-color-disabled);
  --h5-setting-modal-head-background: var(--grey-color-2);
  --h5-setting-modal-border-color: var(--grey-color-3);
  --h5-setting-modal-room-border-color: var(--h5-setting-modal-border-color);
  --h5-setting-modal-color: #222;
  --material-item-background-hover: var(--fill-color-hover);
  --material-item-box-shadow-selected: var(--primary-color);
  --material-style-icon-border: #e0e0e0;
  --material-item-background: transparent;
  --material-item-border-color-selected: #4c88ff;
  --material-item-custom-background: #f2f2f2;
  --material-list-hr-color: var(--designer-border-color);
  --material-item-custom-color: #69f;
  --material-item-custom-border-color: var(--text-color-regular);
  --custom-theme-title-background-hover: var(--line-color-primary);
  --custom-theme-primaryButton-background-hover: #71a0ff;
  --custom-theme-header-backgroud-color: #fff;
  --custom-theme-arrow-color: var(--text-color-primary);
  --custom-theme-normalButton-color-hover: var(--primary-color);
  --custom-theme-portButton-color-hover: var(--text-color-primary);
  --custom-theme-desc-font-color: var(--text-color-secondary);
  --custom-theme-normalButton-border-hover: var(--primary-color);
  --custom-theme-portButton-border: var(--text-color-regular);
  --custom-theme-portButton-border-hover: var(--text-color-primary);
  --custom-theme-header-border-color: #e7eaee;
  --custom-theme-border-color: #999;
  --custom-theme-dropdown-color: #222;
  --custom-theme-dropdown-color-selected: var(--brand-primary);
  --custom-theme-dropdown-item-background-color-hover: #ededed;
  --custom-theme-dropdown-arrow-color: #999;
  --custom-theme-dropdown-arrow-color-hover: var(--custom-theme-dropdown-color);
  --custom-theme-dropdown-popper-background-color: #fff;
  --datatype-left-panel-head-background: var(--grey-color-1);
  --datatype-title-color: var(--text-color-primary);
  --datatype-border-color: #ededed;
  --datatype-panel-border: 1px solid var(--line-color-regular);
  --datatype-left-panel-empty-border: 1px dashed var(--designer-fourth-color);
  --datatype-right-panel-background: var(--grey-color-1);
  --datatype-generic-node-background-hover: var(--primary-color-1);
  --datatype-generic-node-color-hover: #4d88ff;
  --datatype-empty-color: #999;
  --select-tag-background: var(--grey-color-2);
  --select-tag-background-disabled: var(--base-color-white);
  --select-border-color-hover: var(--primary-color);
  --datatype-trigger-color: var(--text-color-disabled);
  --datatype-trigger-color-hover: var(--text-color-primary);
  --datatype-more-icon-color: var(--text-color-regular);
  --datatype-more-icon-color-hover: var(--text-color-primary);
  --datatype-more-icon-border-color: var(--line-color-primary);
  --datatype-select-item-color: #222;
  --datatype-select-item-tip-color: var(--text-color-primary-2);
  --datatype-select-item-color-active: var(--text-color-primary);
  --datatype-select-item-background-hover: var(--tree-view-node-background-active);
  --datatype-select-item-background-active: var(--primary-color-2);
  --datatype-select-item-background-invalid: #f249570f;
  --datatype-select-item-background-invalid-active: var(--error-color);
  --datatype-generic-node-background-invalid-hover: #fddfe2;
  --datatype-select-item-typeDesc: #999;
  --datatype-select-item-typeDesc-active: var(--text-color-secondary);
  --select-icon-color: #999;
  --select-popper-background: var(--base-color-white);
  --popper-box-shadow: 0px 0px 16px 0px rgba(11, 21, 44, 0.16);
  --data-designer-background: var(--grey-color-3);
  --view-designer-bg: var(--grey-color-3);
  --entity-designer-panel-background: var(--designer-first-color);
  --entity-designer-panel-background-color: var(--designer-first-color);
  --entity-designer-body-background: transparent;
  --entity-designer-btnnav-background: var(--designer-second-color);
  --entity-import-color: var(--text-color-primary-2);
  --entity-designer-index-info-color: var(--text-color-primary-2);
  --entity-designer-table-color: var(--text-color-primary-2);
  --entity-designer-table-disabled-color: var(--text-color-disabled);
  --entity-designer-border-color: var(--designer-fourth-color);
  --entity-designer-table-input-focus-border-color: var(--designer-fourth-color);
  --entity-designer-table-input-focus-box-shadow: none;
  --form-item-label-color: var(--text-color-regular-2);
  --entity-designer-icon-group-background-color: var(--base-color-white);
  --entity-designer-icon-group-border-color: var(--line-color-regular);
  --designer-hover-background: var(--designer-third-color);
  --designer-font-disabled-color: var(--icon-color-regular-disabled);
  --designer-table-edit-icon-key-color: var(--warning-color);
  --designer-table-edit-icon-link-color: var(--success-color);
  --list-view-group-head-padding: 2px 4px;
  --list-view-group-head-background: transparent;
  --list-view-item-padding: 4px 8px;
  --list-view-item-background-hover: var(--fill-color-hover);
  --list-view-item-background-selected: var(--primary-color);
  --list-view-item-color-selected: var(--fill-color-primary);
  --input-text-color: var(--text-color-primary-2);
  --input-background: var(--base-color-white);
  --input-background-disabled: var(--grey-color-2);
  --input-background-readonly: var(--grey-color-2);
  --input-border-color: var(--line-color-primary);
  --input-border-color-hover: var(--primary-color);
  --input-border-color-focus: var(--primary-color);
  --input-border-color-error: var(--error-color);
  --input-border-color-disabled: var(--line-color-primary);
  --input-border-width: 1px;
  --input-box-shadow-focus: 0 0 0 2px #4d88ff33;
  --input-icon-color: #666;
  --input-clear-icon-color: #999;
  --input-icon-color-hover: #333;
  --input-placeholder-color: #999;
  --input-color-disabled: #999;
  --tree-view-node-background-active: var(--fill-color-hover);
  --designer-icon-btn-color: #666;
  --designer-icon-btn-color-hover: #666;
  --designer-icon-btn-border-color: #999;
  --designer-icon-btn-border-color-hover: #777c85;
  --capsules-capsule-background: transparent;
  --capsules-capsule-background-selected: transparent;
  --capsules-capsule-background-selected-hover: transparent;
  --capsules-capsule-color: #666;
  --capsules-capsule-color-selected: #666;
  --capsules-capsule-color-hover: #222;
  --capsules-capsule-border-color: #dee4de;
  --capsules-capsule-border-color-selected: var(--primary-color);
  --capsules-capsule-border-color-hover: var(--primary-color);
  --frontend-release-select-border: #e0e0e0;
  --frontend-release-select-background: var(--fill-color-regular);
  --frontend-release-select-item-background-color-hover: #ededed;
  --frontend-release-preview-head-background: var(--fill-color-regular);
  --frontend-release-preview-head-color: var(--text-color-primary);
  --frontend-release-preview-settingTool-color-hover: #333;
  --frontend-release-preview-hint-background: transparent;
  --frontend-release-preview-icon-color: #666;
  --frontend-release-preview-label-color: inherit;
  --frontend-release-preview-content-color: #222;
  --designer-publish-info-bg: var(--fill-color-regular);
  --lightbox-head-height: 64px;
  --lightbox-icon-background: #252525;
  --lightbox-icon-background-hover: #121212;
  --lightbox-icon-background-disabled: #666;
  --lightbox-icon-color: #fff;
  --copy-text: var(--primary-color-6);
  --chat-ai-panel-background: var(--base-color-white);
  --chat-ai-panel-message-background: #f9f9f9;
  --chat-ai-panel-message-box-color: #1d1e24;
  --chat-ai-button-background: #fff;
  --chat-ai-button-background-1: #fff;
  --chat-ai-button-border: #e0e0e0;
  --chat-ai-panel-box-border: #ededed;
  --chat-ai-action-input-background: #fff;
  --chat-ai-action-input-border: #e0e0e0;
  --chat-ai-action-input-disabled: #ededed80;
  --chat-ai-guide-background: #edf3ff99;
  --chat-ai-guide-line: #cddeff;
  --java-logic-ai-generator-color: #2c77b5;
  --java-logic-ai-generator-background: #4cbaff29;
  --code-analysis-helper-item-background: #edf3ff99;
  --integration-bg-color: #fff;
  --designer-tips-upgrade-modal-color: var(--chat-ai-button-border);
  --designer-tips-upgrade-41-color: var(--icon-color-regular-2);
  --validator-error-background-color: var(--error-color);
  --el-disabled-bg-color: #ededed80;
  --minimap-bg: #fff;
  --minimap-border: #e0e0e0;
}

:root .el-alert {
  --el-alert-padding: 8px;
}

:root .el-overlay {
  background-color: #00000099;
}

:root .el-message {
  --el-message-close-size: 12px;
  --el-message-padding: 9px 16px;
  border-color: #303030cc;
  transform: translate(-50%, 94px);
  z-index: 999999999 !important;
}

:root .el-message__content {
  font-size: 12px;
}

:root .el-message--error,
:root .el-message--info,
:root .el-message--success,
:root .el-message--warning {
  --el-message-bg-color: #303030cc;
  --el-message-text-color: var(--base-color-white);
  font-size: 16px;
}

:root .el-message .el-message-icon--error {
  color: var(--error-color);
}

:root .el-message .el-message-icon--success {
  color: var(--success-color);
}

:root .el-message .el-message-icon--warning {
  color: #ffaf0f;
}

:root .el-message .el-message-icon--info {
  color: var(--primary-color);
}

:root .el-alert--info {
  --el-alert-bg-color: var(--primary-color-1);
}

:root .el-alert--success {
  --el-alert-bg-color: var(--success-color-1);
}

:root .el-alert--warning {
  --el-alert-bg-color: var(--warning-color-1);
}

:root .el-alert--error {
  --el-alert-bg-color: var(--error-color-1);
}

:root .s-capsule-tab .el-radio-button__inner {
  --el-border: 1px solid #919499;
  --el-button-text-color: #666;
}

:root .s-capsule-tab .el-radio-button__original-radio:checked + .el-radio-button__inner {
  --el-radio-button-checked-bg-color: #919499;
  --el-radio-button-checked-border-color: var(--el-radio-button-checked-bg-color);
}

:root .s-capsule-tab .el-radio-button__inner:hover {
  color: #222;
}

:root .s-capsule-tab .el-radio-button__original-radio:checked + .el-radio-button__inner {
  color: #fff;
}

:root .el-button {
  --el-button-highlight-color: #ff991c;
  --el-button-highlight-color-hover: #ffa940;
  --el-button-highlight-color-disabled: #ffd097;
}

:root .el-switch {
  --el-switch-off-color: var(--grey-color-4);
  --el-switch-off-color-hover: var(--grey-color-5);
  --el-switch-off-color-disabled: var(--grey-color-2);
  --el-switch-on-color: var(--primary-color);
  --el-switch-on-color-hover: var(--primary-color-5);
  --el-switch-on-color-disabled: var(--primary-color-3);
  --el-switch-border-off-color: var(--el-switch-off-color);
  --el-switch-border-off-color-disabled: #ccc;
  --el-switch-border-on-color: var(--el-switch-on-color);
  --el-switch-border-on-color-disabled: var(--el-switch-on-color-disabled);
  --el-switch-action-off-color-disabled: var(--el-switch-border-off-color-disabled);
  --el-switch-action-on-color-disabled: var(--el-switch-border-color);
}

:root .el-input {
  --el-input-backgound-readonly: #ededed80;
  --el-input-color-disabled: var(--text-color-disabled);
}

:root .el-input__wrapper {
  --el-input-bg-color: var(--base-color-white);
  --el-input-border-color: var(--line-color-primary);
  --el-input-border-color-hover: var(--primary-color);
  --el-input-text-color: var(--text-color-primary-2);
  --el-input-box-shadow-focus: 0 0 0 1px var(--primary-color);
}

:root .el-input__wrapper.is-focus {
  border: 1px solid var(--primary-color);
  box-shadow: var(--el-input-box-shadow-focus);
}

:root .el-input.is-disabled .el-input__wrapper {
  --el-disabled-bg-color: var(--grey-color-2);
  --el-input-border-color: var(--input-border-color-disabled);
}

:root .el-textarea {
  --el-input-text-color: var(--text-color-primary);
  --el-input-border-color: var(--line-color-primary);
  --el-input-bg-color: var(--base-color-white);
}

:root .el-textarea__inner:hover {
  --el-input-hover-border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--el-input-hover-border-color);
}

:root .el-textarea__inner:focus {
  box-shadow: 0 0 0 2px var(--el-input-focus-border-color);
}

:root .el-select {
  --el-select-border-color-hover: var(--primary-color);
}

:root .el-select-dropdown__list {
  --el-select-dropdown-item-color-selected: #fff;
  --el-select-dropdown-item-background-color-selected: var(--primary-color);
  --el-select-dropdown-item-background-color-hover: #ededed;
}

:root .el-input-number {
  --el-input-number-incdec-background-color: var(--grey-color-2);
  --el-input-number-incdec-background-color-hover: var(--base-color-black-op-8);
  --el-input-number-incdec-color: var(--icon-color-regular);
  --el-input-number-incdec-color-hover: var(--icon-color-regular-hover);
}

:root .el-radio-group[flat] {
  background: var(--fill-color-thead);
}

:root .el-radio-group[flat] .el-radio-button .el-radio-button__inner {
  --el-button-bg-color: none;
  --el-border-radius-base: 4px;
  color: var(--text-color-regular);
}

:root .el-radio-group[flat] .el-radio-button:hover .el-radio-button__inner {
  color: var(--text-color-primary);
}

:root .el-radio-group[flat] .el-radio-button.is-active .el-radio-button__inner {
  --el-radio-button-checked-bg-color: var(--fill-color-primary);
  border-color: var(--line-color-primary);
  box-shadow: 0 1px 2px 0 rgba(7, 35, 53, 0.12) !important;
  color: var(--text-color-primary);
}

:root .el-radio {
  --el-radio-bd-disabled: var(--grey-color-2);
  --el-radio-border-color: var(--line-color-primary);
  --el-radio-border-color-disabled: var(--line-color-primary);
  --el-radio-border-color-selected: var(--primary-color);
  --el-radio-border-color-selected-disabled: var(--line-color-primary);
}

:root .el-table {
  --el-table-header-bg-color: var(--fill-color-thead);
  --el-table-header-text-color: var(--text-color-disabled);
  --el-table-cell-color: var(--text-color-primary);
}

:root .el-message-box {
  --el-message-box-header-border-color: var(--line-color-primary);
}

:root .el-message-box__status.el-message-box-icon--warning {
  --el-messagebox-color: #ffaf0f;
}

:root .s-message-box-confirm {
  --el-message-box-content-color: var(--text-color-primary);
  --el-message-box-desc-color: var(--text-color-regular);
}

:root .el-link {
  --el-color-primary: var(--primary-color);
}

:root .el-link--default {
  --el-link-text-color: var(--el-color-primary);
}

:root .el-checkbox {
  --el-checkbox-bg-disabled: hsla(0, 0%, 93%, 0.5);
  --el-checkbox-border-color-disabled: #e0e0e0;
}

:root .el-dialog,
:root .el-message-box {
  --dialog-line-color-primary: var(--line-color-regular);
}

:root .el-message-box {
  --el-message-box-bg-color: var(--fill-color-primary);
}

:root .el-menu {
  --el-menu-top-title-text-color: var(--text-color-disabled);
}

html.dark {
  color-scheme: dark;
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #3375b9;
  --el-color-primary-light-5: #2a598a;
  --el-color-primary-light-7: #213d5b;
  --el-color-primary-light-8: #1d3043;
  --el-color-primary-light-9: #18222c;
  --el-color-primary-dark-2: #66b1ff;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #4e8e2f;
  --el-color-success-light-5: #3e6b27;
  --el-color-success-light-7: #2d481f;
  --el-color-success-light-8: #25371c;
  --el-color-success-light-9: #1c2518;
  --el-color-success-dark-2: #85ce61;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #a77730;
  --el-color-warning-light-5: #7d5b28;
  --el-color-warning-light-7: #533f20;
  --el-color-warning-light-8: #3e301c;
  --el-color-warning-light-9: #292218;
  --el-color-warning-dark-2: #ebb563;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #b25252;
  --el-color-danger-light-5: #854040;
  --el-color-danger-light-7: #582e2e;
  --el-color-danger-light-8: #412626;
  --el-color-danger-light-9: #2b1d1d;
  --el-color-danger-dark-2: #f78989;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #b25252;
  --el-color-error-light-5: #854040;
  --el-color-error-light-7: #582e2e;
  --el-color-error-light-8: #412626;
  --el-color-error-light-9: #2b1d1d;
  --el-color-error-dark-2: #f78989;
  --el-color-info: #909399;
  --el-color-info-light-3: #6b6d71;
  --el-color-info-light-5: #525457;
  --el-color-info-light-7: #393a3c;
  --el-color-info-light-8: #2d2d2f;
  --el-color-info-light-9: #202121;
  --el-color-info-dark-2: #a6a9ad;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  --el-box-shadow-dark:
    0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000, 0px 8px 16px -8px #000;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-text-color-disabled: #6c6e72;
  --el-border-color-darker: #636466;
  --el-border-color-dark: #58585b;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-fill-color-darker: #424243;
  --el-fill-color-dark: #39393a;
  --el-fill-color: #303030;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #1d1d1d;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-blank: transparent;
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}

html.dark .el-button {
  --el-button-disabled-text-color: hsla(0, 0%, 100%, 0.5);
}

html.dark .el-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
}

html.dark .el-empty {
  --el-empty-fill-color-0: var(--el-color-black);
  --el-empty-fill-color-1: #4b4b52;
  --el-empty-fill-color-2: #36383d;
  --el-empty-fill-color-3: #1e1e20;
  --el-empty-fill-color-4: #262629;
  --el-empty-fill-color-5: #202124;
  --el-empty-fill-color-6: #212224;
  --el-empty-fill-color-7: #1b1c1f;
  --el-empty-fill-color-8: #1c1d1f;
  --el-empty-fill-color-9: #18181a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
